﻿<!--https://my.oschina.net/u/4365953/blog/3540874-->
<!--https://blog.csdn.net/sinat_20522337/article/details/79158122-->
<!--https://blog.csdn.net/weixin_30616969/article/details/101332393-->
<!--https://gojs.net.cn/samples/customContextMenu.html-->
<!--https://blog.csdn.net/pdw2009/article/details/82982215-->
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>发布流程定义</title>
    <meta charset="UTF-8">
    <link href="/content/css/css.css" rel="stylesheet"/>
    <link href="/content/themes/base/jquery.ui.all.css" rel="stylesheet"/>
    <script src="/scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="/scripts/jquery-ui-1.8.24.js" type="text/javascript"></script>
    <script src="/content/gojs/1.8.13/go.js"></script>
    <script src="/content/js/flow2.js"></script>
    <script type="text/javascript">

        //浏览
        var isview=false;
        $(function (){
            if(window.location.href.indexOf('onlyview')>-1) {
                isview =true;
                $(".ui-dialog-buttonpane button").hide();
                $('#left').hide();
            }
            init();
            if(isview){
                //myDiagram.isModified=false;
                myDiagram.isReadOnly=true;
                //仅测试
                //var test = {"nodes":[{"text":"开始","next":"sql","location":"0 200","type":"start"},{"text":"sql","next":"结束","location":"100 200","type":"sql","db":"wms","sql":"select * from aaa;,ddd;inse (a) value(2);\'\';calue (2);"},{"text":"结束","next":"","location":"300 300","type":"end"}]};
                //var test={"nodes":[{"type":"Start","location":"0 0","title":"开始","next":"sql升级1","key":-1},{"title":"自動","type":"Auto","next":"结束","key":-2},{"type":"End","location":"0 300","title":"结束","next":null,"key":-3}]};
                //loadFlow(test);
            }
            //alert(JSON.stringify(${json!}));
            loadFlow(${json!});
        });
        var lastDialog =null;
        function nodeDoubleClick(e,node){
            var info = node.part.data;
            if(lastDialog!=null){
                $(lastDialog).dialog("close");
            }
            lastDialog = $("#"+info.dialog);
            lastDialog.dialog('open');
            jsonToDialog(info.dialog,info.key);

        }
        var linkkey=0;
        function linkDoubleClick(e,link){
            var dialog = "link-dialog";
            if(lastDialog!=null){
                $(lastDialog).dialog("close");
            }
            lastDialog = $("#"+dialog);
            lastDialog.dialog('open');
            var d = $('#'+dialog);

            if(link.data["json"]==null) {
                var toNode=myDiagram.findNodeForKey(link.data.to);
                link.data.json = {};
                d.find('[name="script"]').val("");
                d.find('[name="title"]').val("");
            }else{
                d.find('[name="script"]').val(link.data.json.script);
                d.find('[name="title"]').val(link.data.json.title);
            }
            d.find('[name="key"]').attr('value', link.data.key);
        }
        /** 右键菜单*/
        function menu(name,e, obj){
            if(name=="发布"){

            }else if(name=="测试"){
                if(isview){
                    alert('流程查看状态不支持测试！');
                    return;
                }
            }
        }
    </script>
    <style>
        .midtext{
            width: 50px;
        }
        label{min-width: auto;}
        .mydetail label{width:auto;}
        .mydetail li{margin-top: 5px;}
    </style>

</head>
<body>
<div>
    <div style="width:100%; white-space:nowrap;">
    <span id="left" style="display: inline-block; vertical-align: top; width:60px">
      <div id="myPaletteDiv" style="border: solid 1px black; height: 620px"></div>
    </span>
        <span style="display: inline-block; vertical-align: top; width:100%">
      <div id="myDiagramDiv" style="border: solid 1px black; height: 620px"></div>
    </span>
    </div>
</div>
<!--link配置-->
<div id="link-dialog" title="路由配置">
    <div id="linktabs" name="key">
        <ul>
            <li><a href="#linktab0">名称</a></li>
            <li><a href="#linktab1">路由脚本</a></li>
        </ul>
        <div id="linktab0">
            <input class="midtext" type="text" name="title" json="title" level="1"/>
        </div>
        <div id="linktab1">
            <textarea rows="5" cols="40" name="script" json="script" level="1"></textarea>
        </div>
    </div>

    <script type="text/javascript">
        $('#linktabs').tabs();
        $('#link-dialog').dialog({
            autoOpen:false,
            height: 350,
            width: 450,
            modal: true,
            draggable: true,
            minWidth: 300,
            buttons: {
                "关闭": function() {
                    $(this).dialog("close");
                },
                "保存": function() {
                    //dialogToJson('link-dialog');
                    var d = $('#link-dialog');
                    var linkKey = d.find('[name="key"]').attr('value');
                    var data=myDiagram.model.findLinkDataForKey(linkKey);
                    var script = d.find('[name="script"]').val();
                    var title = d.find('[name="title"]').val();
                    data.json["script"]=script;
                    data.json["title"]=title;
                    myDiagram.model.setDataProperty(data,"title",title);
                    $(this).dialog("close");
                }
            }
        });
    </script>
</div>
<!--start配置-->
<div id="start-dialog" title="开始配置">
    <div id="starttabs" name="key">
        <ul>
            <li><a href="#starttab0">变量</a></li>
            <li><a href="#starttab1">开始脚本</a></li>
            <li><a href="#starttab2">结束脚本</a></li>
            <li><a href="#starttab4">调试</a></li>
        </ul>
        <div id="starttab0">
            <a class="btn3" href="javascript:addVariable()">添加</a>
            <div id="variables" name="variables" json="variables" jsontype="list" template="variable_Template" level="1">
            </div>
            <input type="hidden" json="type" name="type" data="Start" level="1"/>
        </div>
        <div id="starttab1">
            <textarea rows="5" cols="40" name="beginScript" json="beginScript" level="1"></textarea>
        </div>
        <div id="starttab2">
            <textarea rows="5" cols="40" name="endScript" json="endScript" level="1"></textarea>
        </div>
        <div id="starttab4">
            <button onclick="checkXml()">校验格式</button><br/><br/>
            <button onclick="save()">调试json</button><br/><br/>
            <button onclick="makeBlob()">保存流程图片</button>
        </div>
    </div>
<#--        <button onclick="save()">保存</button>-->
<#--        -->
        <!--        <button onclick="load()">Load</button>-->
    <script type="text/javascript">
        function checkXml(callback){
            var j= modelToJson();
            if(j!=null) {
                $.post("/manager/model/xml",
                    {
                        'json': JSON.stringify(j)
                    },
                    function (data) {
                        if (data.code < 0) {
                            alert(data.message);
                        } else {
                            if (callback != null) {
                                callback();
                            } else {
                                alert("校验成功");
                            }
                            return data.data;
                        }
                    }, "json");
            }
        }
        function save(){
            var j = modelToJson();
            if(j!=null) {
                var js=JSON.stringify(j);
                $("<div>"+js+ "</div>").dialog();
            }
        }
        function debug() {
            myDiagram.model.modelData.position = go.Point.stringify(myDiagram.position);
            alert(myDiagram.model.toJson());
            //myDiagram.isModified = false;
        }
        function loadFlow(json) {
            if(json!=null) {
                var jsonModel = jsonToModel(json);
                myDiagram.model.nodeDataArray =jsonModel.nodeDataArray;
                myDiagram.model.linkDataArray =jsonModel.linkDataArray;
            }else
            {
                myDiagram.model.nodeDataArray=[Object.create(customNodeTemplate.Start), Object.create(customNodeTemplate.End)];
            }
            //var pos = myDiagram.model.modelData.position;
            //if (pos) myDiagram.initialPosition = go.Point.parse(pos);
        }
        function removeVariable(item){
            $(item).parent().remove();
            return false;
        }
        function addVariable(){
            var item = $('#'+$('#variables').attr('template')).children().clone(true);
            $('#variables').append(item);
            return false;
        }
        $('#starttabs').tabs();
        $('#start-dialog').dialog({
            autoOpen:false,
            height: 350,
            width: 450,
            modal: true,
            draggable: true,
            minWidth: 300,
            buttons: {
                "关闭": function() {
                    $(this).dialog("close");
                },
                "保存": function() {
                    dialogToJson('start-dialog');
                    $(this).dialog("close");
                }
            }
        });
    </script>
</div>
<!--end配置-->
<div id="end-dialog" title="结束配置">
    <div id="endtabs" name="key">
        <ul>
            <li><a href="#endtab1">开始脚本</a></li>
<#--            <li><a href="#starttab2">结束脚本</a></li>-->
<#--            <li><a href="#starttab3">路由脚本</a></li>-->
        </ul>
        <div id="endtab1">
            <input type="hidden" json="type" name="type" data="End" level="1"/>
            <textarea rows="5" cols="40" name="beginScript" json="beginScript" level="1"></textarea>
        </div>
<#--        <div id="starttab2">-->
<#--            <textarea rows="5" cols="40" name="endScript" json="endScript"></textarea>-->
<#--        </div>-->
<#--        <div id="starttab3">-->
<#--            <textarea rows="5" cols="40" name="routeScript" json="routeScript"></textarea>-->
<#--        </div>-->
    </div>
    <script type="text/javascript">
        $('#endtabs').tabs();
        $('#end-dialog').dialog({
            autoOpen:false,
            height: 350,
            width: 450,
            modal: true,
            draggable: true,
            minWidth: 300,
            buttons: {
                "关闭": function() {
                    $(this).dialog("close");
                },
                "保存": function() {
                    dialogToJson('end-dialog');
                    $(this).dialog("close");
                }
            }
        });
    </script>
</div>
<!--自动配置-->
<div id="auto-dialog" title="自动配置">
    <div id="autotabs" name="key">
        <ul>
            <li><a href="#autotab0">名称</a></li>
            <li><a href="#autotab1">开始脚本</a></li>
            <li><a href="#autotab2">结束脚本</a></li>
        </ul>
        <div id="autotab0">
            <input class="midtext" type="text" name="title" json="title" level="1"/>
            <input type="hidden" json="type" name="type" data="Auto" level="1"/>
        </div>
        <div id="autotab1">
            <textarea rows="5" cols="40" name="beginScript" json="beginScript" level="1"></textarea>
        </div>
        <div id="autotab2">
            <textarea rows="5" cols="40" name="endScript" json="endScript" level="1"></textarea>
        </div>
    </div>
    <script type="text/javascript">
        $('#autotabs').tabs();
        $('#auto-dialog').dialog({
            autoOpen:false,
            height: 350,
            width: 450,
            modal: true,
            draggable: true,
            minWidth: 300,
            buttons: {
                "关闭": function() {
                    $(this).dialog("close");
                },
                "保存": function() {
                    dialogToJson('auto-dialog');
                    $(this).dialog("close");
                }
            }
        });
    </script>
</div>
<!--人工配置-->
<div id="man-dialog" title="人工配置">
    <div id="mantabs" name="key">
        <ul>
            <li><a href="#mantab0">名称</a></li>
            <li><a href="#mantab1">开始脚本</a></li>
            <li><a href="#mantab2">结束脚本</a></li>
            <li><a href="#mantab3">审批结果</a></li>
            <li><a href="#mantab4">审批人</a></li>
            <li><a href="#mantab5">通知</a></li>
        </ul>
        <div id="mantab0">
            <input class="midtext" type="text" name="title" json="title" level="1"/>
            <input type="hidden" json="type" name="type" data="Man" level="1"/>
        </div>
        <div id="mantab1">
            <textarea rows="5" cols="40" name="beginScript" json="beginScript" level="1"></textarea>
        </div>
        <div id="mantab2">
            <textarea rows="5" cols="40" name="endScript" json="endScript" level="1"></textarea>
        </div>
        <div id="mantab3">
            <input class="midtext" type="text" name="approveResults" jsontype="array" json="approveResults" level="1"/>
        </div>
        <div id="mantab4">
            <div id="approveUser" name="approveUser" json="approveUser" jsontype="form" level="1">
                <span>分发模式</span>
                <select id="distributeModeEnum" name="distributeModeEnum" json="distributeModeEnum" level="2">
                    <#list Html.enums("com.yh.csx.bsf.flow.core.base.Model$DistributeModeEnum") as item>
                        <option value="${Html.filed(item,"Value")}" >${Html.filed(item,"Desc")}</option>
                    </#list>
                </select>
                <span>筛选方式</span>
                <select id="filterModeEnum" style="min-width: 70px" name="filterModeEnum" json="filterModeEnum" level="2">
                    <#list Html.enums("com.yh.csx.bsf.flow.core.base.Model$FilterModeEnum") as item>
                        <option value="${Html.filed(item,"Value")}" >${Html.filed(item,"Desc")}</option>
                    </#list>
                </select>
                <span>最多审批人数</span>
                <input class="midtext" style="width: 30px" type="text" name="approveNum" json="approveNum" level="2"/>
                <br/>
                <span>选择审批人</span>
                <a class="btn3" href="javascript:addChooseUser()">添加</a>
                <div id="chooseUser" name="chooseUsers" json="chooseUsers" jsontype="list" template="chooseUser_Template" level="2">
                </div>
            </div>
        </div>
        <div id="mantab5">
            <span>任务创建通知</span>
            <select id="startNotify" name="startNotify" json="startNotify" level="1">
                <#list Html.enums("com.yh.csx.bsf.flow.core.base.Model$NotifyEnum") as item>
                    <option value="${Html.filed(item,"Value")}">${Html.filed(item,"Desc")}</option>
                </#list>
            </select><br/>
            <span>审批完成通知</span>
            <select id="endNotify" name="endNotify" json="endNotify" level="1">
                <#list Html.enums("com.yh.csx.bsf.flow.core.base.Model$NotifyEnum") as item>
                    <option value="${Html.filed(item,"Value")}">${Html.filed(item,"Desc")}</option>
                </#list>
            </select>
        </div>
    </div>
    <script type="text/javascript">
        $('#mantabs').tabs();
        $('#man-dialog').dialog({
            autoOpen:false,
            height: 350,
            width: 550,
            modal: true,
            draggable: true,
            minWidth: 300,
            buttons: {
                "关闭": function() {
                    $(this).dialog("close");
                },
                "保存": function() {
                    dialogToJson('man-dialog');
                    $(this).dialog("close");
                }
            }
        });
        function removeChooseUser(item){
            $(item).parent().remove();
            return false;
        }
        function addChooseUser(){
            var item = $('#'+$('#chooseUser').attr('template')).children().clone(true);
            $('#chooseUser').append(item);
            return false;
        }
    </script>
</div>
<div id="chooseUser_Template" style="display: none">
    <div>
        <span>集合</span>
        <select id="setOperationEnum" name="setOperationEnum" json="setOperationEnum" level="3">
            <#list Html.enums("com.yh.csx.bsf.flow.core.base.ChooseUser$SetOperationEnum") as item>
                <option value="${Html.filed(item,"Value")}">${Html.filed(item,"Desc")}</option>
            </#list>
        </select>
        <span>类型</span>
        <select id="userRoleEnum" name="userRoleEnum" json="userRoleEnum" level="3">
        <#list Html.enums("com.yh.csx.bsf.flow.core.base.ChooseUser$UserRoleEnum") as item>
            <option value="${Html.filed(item,"Value")}">${Html.filed(item,"Desc")}</option>
        </#list>
        </select>
        <a href="#" onclick="removeChooseUser(this)" class="btn3">删除</a>
        <br/>
        <span>取值</span><input class="midtext" style="width: 400px" type="text" name="value" json="value" level="3"/><br/>
        <span>描述</span><input class="midtext" style="width: 400px" type="text" name="description" json="description" level="3"/><br/>
    </div>
</div>
<div id="variable_Template" style="display: none">
    <div>
        <span>变量Key</span><input class="midtext" style="width: 100px" type="text" name="key" json="key" level="2"/>
        <span>描述</span><input class="midtext" style="width: 100px" type="text" name="desc" json="desc" level="2"/>
        <a href="#" onclick="removeVariable(this)" class="btn3">删除</a>
        <br/>
        <span>变量值</span><input class="midtext" style="width: 350px" type="text" name="value" json="value" level="2"/>
        <br/>
    </div>
</div>
</body>
</html>